import { ITodoData } from "./typings";
import TodoTemplate from "./TodoTemplate";
import { findParentNode, createItem } from "./utils";

class TodoDom extends TodoTemplate {
  constructor(private todoWarpper: HTMLElement) {
    super();
  }
  protected initList(todoData: ITodoData[]) {
    if (todoData.length) {
      const oFrag: DocumentFragment = document.createDocumentFragment();
      todoData.map((todo: ITodoData) => {
        const oItem: HTMLElement = createItem(
          "div",
          "todo-item",
          this.todoView(todo)
        );
        oFrag.appendChild(oItem);
      });
      this.todoWarpper.appendChild(oFrag);
    }
  }

  protected addItem(todo: ITodoData): void {
    const oItem: HTMLElement = createItem(
      "div",
      "todo-item",
      this.todoView(todo)
    );
    this.todoWarpper.appendChild(oItem);
  }

  protected removeItem(target: HTMLElement) {
    const OparentNode: HTMLElement = findParentNode(target, "todo-item");
    OparentNode.remove();
  }

  protected changeComplete(target: HTMLElement, completed: boolean) {
    const oParentNode: HTMLElement = findParentNode(target, "todo-item");
    const oContent: HTMLElement = oParentNode.querySelector("span");
    oContent.style.textDecoration = completed ? "line-through" : "none";
  }
}

export default TodoDom;
